﻿@using thousandClear.Areas.Admin.Models;
@model AuntModel
@{
    ViewBag.Title = "修改管家";
    Layout = "~/Areas/Admin/Views/Shared/_Admin.cshtml";
}

<div id="app">
    <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">后台管理</strong> / <small>@ViewBag.Title</small></div>
    </div>
    <div class="am-tabs am-margin" data-am-tabs>
        <div class="am-tabs-bd">
            <form action="" onsubmit="return check()" method="post" class="am-form" id="form">
                <fieldset>
                    <div class="am-form-group">
                        <label for="oatNo">工号:</label>
                        <input type="text" id="oatNo" placeholder="输入工号(必填)" required v-model="oatNo" />
                    </div>
                    <div class="am-form-group">
                        <label for="oatName">姓名:</label>
                        <input type="text" id="oatName" placeholder="输入管家名字(必填)" required v-model="oatName" />
                    </div>
                    <div class="am-form-group">
                        <label for="IDNo">身份证：</label>
                        <input type="text" id="IDNo" placeholder="请输入身份证(非必填)" required v-model="IDNo" />
                    </div>
                
                    <div class="am-form-group">
                        <label for="oatPhone">手机号:</label>
                        <input type="text" id="oatPhone" placeholder="输入管家手机号码(必填)" required v-model="oatPhone" />
                    </div>
                    <div class="am-form-group">
                        <label for="oatDesc">管家描述:</label>
                        <input type="text" id="oatDesc" placeholder="输入管家描述(非必填)" v-model="oatDesc" />
                    </div>
                    <div class="am-form-group am-form-file">
                        <label>头像</label>&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="am-btn am-btn-default am-btn-sm" v-if="imgUrl == ''">
                            <i class="am-icon-cloud-upload"></i> 上传图片
                        </button>
                        <!--http://placeholder.qiniudn.com/60x60-->
                        @if (string.IsNullOrEmpty(Model.ImgUrl))
                        {

                            <img id="imgImgUrl" v-bind:src="imgUrl" width="60px" height="60px" v-if="imgUrl != ''" />

                        }
                        else
                        {
                            <img id="imgImgUrl" src="@Model.UploadUrl@Model.ImgUrl" width="60px" height="60px" v-if="imgUrl != ''" />
                        }
                        <input id="txtImgUrl" type="file">
                    </div>
                    <div class="am-form-group am-form-file">
                        <label>健康证</label>&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" class="am-btn am-btn-default am-btn-sm" v-if="HealthImg == ''">
                            <i class="am-icon-cloud-upload"></i> 上传图片
                        </button>
                        <!--http://placeholder.qiniudn.com/60x60-->
                        @*<img id="imgHealthImg" v-bind:src="HealthImg" width="60px" height="60px" v-if="HealthImg != ''" />
                        <input id="txtHealthImg" type="file">*@
                        @if (string.IsNullOrEmpty(Model.HealthImg))
                        {

                            <img id="imgHealthImg" v-bind:src="HealthImg" width="60px" height="60px" v-if="HealthImg != ''" />

                        }
                        else
                        {
                            <img id="imgHealthImg" src="@Model.UploadUrl@Model.HealthImg" width="60px" height="60px" v-if="HealthImg != ''" />
                        }
                        <input id="txtHealthImg" type="file">
                    </div>
                    <input type="hidden" name="data" v-bind:value="data" />
                    <button type="submit" class="am-btn am-btn-secondary">提交</button>
                </fieldset>
            </form>
        </div>
    </div>
</div>
@section Scripts{
    <script src="~/Statics/Venders/uedit-1.4.3.1/ueditor.config.js"></script>
    <script src="~/Statics/Venders/uedit-1.4.3.1/ueditor.all.min.js"></script>
    <script>
        var model = new Vue({
            el: '#app',
            data: {
                OATID:@Model.OATID,
                oatName:'@Model.oatName',
                oatPhone:'@Model.oatPhone',
                oatDesc:'@Model.oatDesc',
                imgUrl: '@Model.ImgUrl',
                oatNo:'@Model.oatNo',
                IDNo: '@Model.IDNo',
                HealthImg: '@Model.HealthImg'
            },
            computed: {
                data: function () {
                    return JSON.stringify(this._data);
                }
            },
            methods:{
                previewImgUrl: function (e) {
                    var self = this;
                    var file = e.delegateTarget.files[0];
                    //在此可以对选择的文件进行判断:文件类型 文件大小等
                    //.....

                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (ret) {
                        picBase64 = reader.result
                        //预览图片
                        $("#imgImgUrl").attr({ "src": picBase64 });

                        self.imgUrl = picBase64;
                    }
                },
                previewHealthImgUrl: function (e) {
                    var self = this;
                    var file = e.delegateTarget.files[0];
                    //在此可以对选择的文件进行判断:文件类型 文件大小等
                    //.....

                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (ret) {
                        picBase64 = reader.result
                        //预览图片
                        $("#imgHealthImg").attr({ "src": picBase64 });

                        self.HealthImg = picBase64;
                    }
                }
            }

        })
        $('.admin-sidebar-Aunt').addClass('current');
        var $txtImgUrl = $('#txtImgUrl');
        $txtImgUrl.change(model.previewImgUrl);

        var $txtHealthImg = $('#txtHealthImg');
        $txtHealthImg.change(model.previewHealthImgUrl);
    </script>
}
